<template>
  <div id="nav">
     <input type="button" value="get请求" class="get" @click="testGet"/>
    <ul v-if="jokes.length!=0">
        <li v-for="(joke,index) in jokes" :key="joke">
            {{index}}:{{joke}}
        </li>
    </ul>
  </div>

</template>
<script>
import service from './utils/http'
export default {
  data() {
    return {
        num:5,
        jokes:[],
        registerMsg:''
    };
  },
  methods: {
      //请求地址:https://api-vue-base.itheima.net/api/joke/list
            //请求方法:get
            //请求参数:num(笑话条数,数字)
            //响应内容:随机笑话（响应状态码、信息、数据）
    testGet(){
      service.get(`https://api-vue-base.itheima.net/api/joke/list?num=${this.num}`)
            .then(response => {
                    // handle success  此处的response响应对象
                    console.log(response);
                    // response.data包含:status响应状态码，msg响应信息，data响应数据
                    console.log(response.data);
                    console.log(this.jokes)
                    this.jokes = response.data
                })
            .catch(function(err){
                console.log(err)
            })
    },
  }
};
</script>


<style lang="less" scoped>
#nav li {
  text-align: left;
}
</style>
